<!DOCTYPE html>
<html class="x-admin-sm" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>新增用户信息</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta http-equiv="Expires" content="0">
    <title>登录</title>
    <link rel="stylesheet" th:href="@{/xadmin/css/font.css}"/>
    <link rel="stylesheet" th:href="@{/xadmin/css/xadmin.css}"/>
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
    <script th:src="@{/xadmin/lib/layui/layui.js}" charset="utf-8"></script>
    <script type="text/javascript" th:src="@{/xadmin/js/xadmin.js}"></script>
    <link rel="stylesheet" th:href="@{/xadmin/css/login.css}"/>
</head>

<body>
<div class="x-body">
    <form class="layui-form">

        <div class="layui-form-item">
            <label for="L_username" class="layui-form-label">
                <span class="x-red">*</span>用户名
            </label>
            <div class="layui-input-inline">
                <input type="text" id="L_username" name="username"  readonly="readonly" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-mid layui-word-aux">
                <span class="x-red">*</span>将会成为您唯一的登入名
            </div>
        </div>

        <div class="layui-form-item">
            <label for="L_pass" class="layui-form-label">
                <span class="x-red">*</span>旧密码
            </label>
            <div class="layui-input-inline">
                <input type="password" id="O_pass" name="oldPassword" lay-verify="oldPassword" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-mid layui-word-aux">
                5到16个字符
            </div>
        </div>

        <div class="layui-form-item">
            <label for="L_pass" class="layui-form-label">
                <span class="x-red">*</span>新密码
            </label>
            <div class="layui-input-inline">
                <input type="password" id="L_pass" name="newPassword" lay-verify="newPassword" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-mid layui-word-aux">
                5到16个字符
            </div>
        </div>
        <div class="layui-form-item">
            <label for="L_repass" class="layui-form-label">
                <span class="x-red">*</span>确认密码
            </label>
            <div class="layui-input-inline">
                <input type="password" id="L_repass" name="newPassword2" required="" lay-verify="newPassword2" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label for="add" class="layui-form-label">
            </label>
            <button  class="layui-btn" id="add" lay-filter="add" lay-submit="">
                修改
            </button>
        </div>
    </form>
</div>
<script>
    $("#L_username").val(localStorage.username);
    layui.use(['form','layer'], function(){
        $ = layui.jquery;
        var form = layui.form
                ,layer = layui.layer;

        //自定义验证规则
        form.verify({
            oldPassword: [/(.+){5,12}$/, '密码必须6到12位'],
            pass: [/(.+){5,12}$/, '密码必须6到12位']
            ,newPassword: function(value){
                if($('#L_pass').val()!=$('#L_repass').val()){
                    return '两次密码不一致';
                }
            }
        });

        //监听提交
        form.on('submit(add)', function(data){
            $.ajax({
                url:"/user/changePassword",
                type:"POST",
                data:data.field,
                dataType:'json',
                success:function(result){
                    if(result.code == 1 || result.code == 2 || result.code == 3){
                        layer.alert(result.msg);
                    } else {
                        layer.alert("设置成功", {icon: 6},function () {
                            location.reload();
                        });
                    }
                }
            });
            return false;
        });
    });
</script>
</body>
</html>